<template>
	<div class='headlist'>
		<img v-for='item in imglist' :src="item" alt="head" @click='clickimg(item)' />
	</div>
</template>

<script>
	export default{
		data(){
			return{
				imglist:[]
			}
		},
		created(){
			this.init();
		},
		methods:{
			init(){
				for(var i=1;i<16;i++){
					this.imglist.push('/static/img/head/'+i+'.jpg');
				}
			},
			clickimg(item){
				this.$emit('clickimg',item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	$ppr:750px/15/1rem;
	.headlist{
		width:100%;
		height: 100%;
		background:#266ba2;
		&:after{
			content: '';
			clear: both;
			display: block;
		}
		img{
			width:20%;
			height: 100px/$ppr;
			border-radius: 50%;
			float: left;
			display: inline-block;
		}
	}
</style>